<template>
    <div class="static_wrapper">
      <div class="static_inner">
        <div class="back" style="display: flex;margin: 0px auto;max-width: 600px;padding-left: 10px;"><span @click="$router.replace('/home')"  class="el-icon-arrow-left" style="font-size: 25px;opacity: 0.6"></span></div>
        <div class="static_icon_wrapper">
          <div class="static_icon_inner" style="padding-bottom: 20px;border-bottom: 10px solid rgba(205,195,195,0.3)" >
            <div class="el-icon-s-data" style="color: #2473fc;font-size: 70px;"></div>
            <div>我的统计</div>
          </div>
          <div class="progress_wrapper" style="box-shadow: 0 2px 12px 0 rgba(0,0,0,0.5);height: 500px;">
            <div class="progress_inner">
              <div class="my_word_count_wrapper">
                <div class="my_word_wrapper_inner" style="font-weight: bold;padding-top: 10px;">
                  <span>我的单词总数：</span><span style="color: #2473fc;font-size: 18px;">{{total}}</span>
                </div>
              </div>
              <div class="progress_list_wrapper" >
                <div class="progress_one" style="display: flex;margin: 20px;" v-for="item in progress_list">
                  <span style="width: 80px;text-align: right">{{item.name}}：</span>
                  <el-progress :percentage="item.num" style="width: 80%;display: block;margin-top: 5px;" color="blue" :color="customColor"></el-progress>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import {postRequest} from "../../utils/api";
  import {strsutils} from "../../utils/strutils";
  let baseurl = strsutils.baseurl
  export default {
      name: "StaticView",
      data(){
        return {
          total: 0,
          progress_list:[]
        }
      },
      mounted() {
        postRequest(baseurl+'/getProgress/'+window.localStorage.getItem('userid')).then(res=>{
          console.debug("获取统计信息成功"+JSON.stringify(res.data))
          this.progress_list = res.data.staticBeans
          this.total = res.data.num
        }).catch(err=>{
          console.debug("获取统计信息失败"+err)
        })
      }
  }
</script>

<style scoped>

</style>
